<template>
	<view class="">
		<view class="login-form">
			<view class="form-item">
				<image src="../../static/images/icon-account.png" mode=""></image>
				<input type="text" placeholder="Please enter the account number" maxlength="20" v-model="loginForm.userName">
			</view>
			<view class="form-item">
				<image src="../../static/images/icon-password.png" mode=""></image>
				<input type="password" placeholder="Please enter a password" v-model="loginForm.password">
			</view>
		</view>
		<view class="login-btn flex-xy-center" @tap="login">login</view>
	</view>
</template>

<script>
	import { login } from '@/api/user.js'
	import validate from '@/utils/validate.js'
	export default {
		data() {
			return {
				loginForm:{
					userName: '',
					password: ''
				}
			}
		},
		methods: {
			login(){
				if(!validate.isNotEmpty(this.loginForm.userName, 'The ccount number'))return 
				if(!validate.isNotEmpty(this.loginForm.password, 'The password'))return 
				login(this.loginForm).then(res => {
					console.log(res);
					this.toast('login success!')
					this.$store.commit('user/SET_TOKEN', res.token)
					this.$store.commit('user/SET_LOGIN', true);
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/index/index'
						})
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-form{
		margin: 150rpx 90rpx;
		
		.form-item{
			display: flex;
			align-items: center;
			padding-top: 60rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid  #EEEEEE;
			
			image{
				width: 46rpx;
				height: 46rpx;
			}
			
			input{
				padding-left: 30rpx;
				flex:1;
				font-size: 31rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
	}
	
	.login-btn{
		margin: 160rpx 90rpx;
		height: 100rpx;
		background: $theme-color;
		border-radius: 50px;
		font-size: 37rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
